<template>
  <div class="order">
    <base-template :breadList="['订单管理', '订单列表']">
      <el-row> <el-input class="search" v-model="inputValue" placeholder="此搜索框无价值" clearable ></el-input>
	  <el-button class="el-icon-search search"></el-button> </el-row>

      <el-table :data="orderData" style="width: 100%; font-size: 12px" border stripe>
        <el-table-column type="expand" label="~" width="50">
          <template v-slot="scope">
            <el-form label-position="left" stripe style="margin-left: 30px; color: #aaa">
              <el-form-item label="订单号 :">
                <span>{{ scope.row.order_number }}</span>
              </el-form-item>
              <el-form-item label="发票 :">
                <span>{{ scope.row.order_fapiao_title }}</span>
              </el-form-item>
              <el-form-item label="后台订单id :">
                <span>{{ scope.row.order_id }}</span>
              </el-form-item>
              <el-form-item label="订单创建时间 :">
                <span>{{ new Date(scope.row.create_time).toLocaleString() }}</span>
              </el-form-item>
              <el-form-item label="最近更新时间 :">
                <span>{{ new Date(scope.row.update_time).toLocaleString() }}</span>
              </el-form-item>
              <el-form-item label="商品价格 :">
                <span>{{ scope.row.order_price }}</span>
              </el-form-item>
              <el-form-item label="付款状态 :">
                <span>{{ scope.row.order_pay == 0 ? '否' : '是' }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#" width="50"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号"> </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="100"> </el-table-column>
        <el-table-column prop="order_pay" label="是否付款" width="100">
          <template v-slot="scope">
            <el-tag v-if="scope.row.order_pay != 0" effect="dark" size="mini">已付款</el-tag>
            <el-tag v-else effect="dark" type="danger" size="mini">未付款</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="is_send" label="是否发货" width="100"> </el-table-column>
        <el-table-column prop="create_time" label="下单时间" width="180">
          <template v-slot="scope">
            <span>{{ new Date(scope.row.create_time).toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="scope">
            <el-tooltip effect="dark" content="修改订单地址" placement="top">
              <el-button class="el-icon-edit marginRight" effect="dark" size="mini" type="primary" @click="editLocation"></el-button>
            </el-tooltip>

            <el-tooltip effect="dark" content="物流信息" placement="top">
              <el-button class="el-icon-location" effect="dark" size="mini" type="success" @click="viewLocation(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginationInfo.pagenum"
        :page-sizes="[2, 5, 10, 50]"
        :page-size="paginationInfo.pagesize"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </base-template>

    <el-dialog title="提示" :visible.sync="editDialog" width="50%" :before-close="handleClose">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="省市区/县" prop="province">
          <el-cascader v-model="ruleForm.province" :options="options" :props="props" class="domWidth400"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="city">
          <el-input class="domWidth400" v-model="ruleForm.city"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editProvince">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="locationDialog" width="50%" :before-close="handleClose">
      <el-timeline :reverse="false">
        <el-timeline-item v-for="(activity, index) in locationInfo" :key="index" :timestamp="activity.time" :color="index == 0 ? '#0f0' : ''">
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="locationDialog = false">取 消</el-button>
        <el-button type="primary" @click="locationDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseTemplate from '../../component/base-template.vue'
import province from '../../util/city_data2017_element'
export default {
  components: {
    BaseTemplate,
  },
  data() {
    return {
      orderData: [],
      paginationInfo: {
        pagenum: 1,
        pagesize: 5,
      },

      total: 0,
      editDialog: false,
      ruleForm: {
        province: '',
        city: '',
      },
      rules: {
        province: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        city: [{ required: true, message: '请填写具体地址', trigger: 'blur' }],
      },
      options: province,
      props: {
        expandTrigger: 'hover',
        children: 'children',
        label: 'label',
        value: 'value',
      },
      locationDialog: false,
      locationInfo: [],
      locationId: '',
      timer: null,

      inputValue: '',
    }
  },
  created() {
    this.getOrderData()
  },
  methods: {
    async getOrderData() {
      const { goods, total } = await this.$store.dispatch('getRequest', { path: `/orders`, params: this.paginationInfo })
      this.orderData = goods
      this.total = total
    },

    editLocation() {
      this.editDialog = true
    },
    async viewLocation() {
      this.locationInfo = await this.$store.dispatch('getRequest', { path: `/kuaidi/1106975712662` })
      this.locationDialog = true
    },
    handleSizeChange(val) {
      this.paginationInfo.pagesize = val
      this.getOrderData()
    },
    handleCurrentChange(val) {
      this.paginationInfo.pagenum = val
      this.getOrderData()
    },
    editProvince() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.editDialog = false
          this.$message.success('收货地址修改成功')
          this.timer = setTimeout(() => {
            this.$message.error('无后台数据支持，修改失败')
            clearTimeout(this.timer)
            this.timer = null
          }, 1500)
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // async searchId() {
	// 	if(!this.inputValue){
	// 		return 
	// 	}
    //   const res = await this.$store.dispatch('getRequest', { path: `/orders/${this.inputValue}` })
    //   console.log(res)
    //   this.orderData = res.goods
    // },
  },
  beforeDestroy() {
    clearTimeout(this.timer)
    this.timer = null
    console.log(this.timer)
  },
}
</script>
